{include file="public/head" title="认证" keywords="认证" description="认证" /}
<style>
    .toauth > span{
        font-size: 0.7rem;
        margin-left: 5px;
    }
    .toauth input{
        font-size: 0.7rem;
    }
    .mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{
        line-height: 1.8;
        font-size: 25px;
    }
    .mui-checkbox.mui-left label, .mui-radio.mui-left label{
        padding-left: 48px;
        padding-right: 0px;
    }
    .mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{
        color: #01cebf;
    }
    .uploadImg{cursor:pointer; overflow:hidden; position:relative;width: 5rem;height: 5rem;}
    .file{ cursor:pointer;position:absolute; z-index:100; left:0;top:0;width: 5rem;height: 5rem;opacity:0;filter:alpha(opacity=0);}
    .uploadImg a{cursor:pointer;position: absolute;top:0.5rem;left:0;display: block;width: 5rem;height: 5rem;text-align: center;line-height: 32px;color:white;font-size:14px;font-weight:normal;}
</style>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
    <!-- 菜单容器 -->

    <div class="mui-inner-wrap">
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper" style="background-color: #fff;">
            <div class="mui-scroll">
                <header class="tx_head">
                    <p>
                        <a href="{:url('index')}" class="header_p1"><span class="mui-icon mui-icon-arrowleft"></span></a>
                    <h5>用户认证</h5>
                    </p>
                </header>
                <main class="wdzh_main">
                    <section class="wdzh_main_section1">
                        <div style="{if condition='$status eq 1'}border-bottom: 1px solid #01cebf {/if}">
                            <a href="{:url('Account/toauth')}"><div>

                                <p class="tbp">个人认证</p>
                            </div></a>
                        </div>
                        <div style="{if condition='$status eq 2'}border-bottom: 1px solid #01cebf {/if}">
                            <a href="{:url('Account/fuwushang')}"><div>

                                <p class="tbp">服务商认证</p>
                            </div></a>
                        </div>

                    </section>
                    <section class="">
                        <ul class="">
                            <li class="jyjl_li" style="border-bottom: 7px solid #f3f3f3;line-height: 0;height: 0.1rem;">

                            </li>
                            <li  class="toauth"><span>负责人姓名:</span>
                                {if !empty($users.real_name) && ($users.step == 4)}<span>{$users.real_name}</span>{else /}
                                <input  type="text" id="realname" value="{$users.real_name}" placeholder="负责人姓名"/>
                                {/if}
                            </li>
                            <li class="toauth"><span style="margin-right: 1rem;">联系电话:</span>
                                {if !empty($users.phone) && ($users.step == 4)}<span>{$users.phone}</span>{else /}
                                <input  type="text" id="phone" value="{$users.phone}" placeholder="联系电话"/>
                                {/if}
                            </li>
                            <li class="toauth"><span style="margin-right: 1rem;">紧急联系人:</span>
                                {if !empty($users.tile) && ($users.step == 4)}<span>{$users.tile}</span>{else /}
                                <input type="text" id="phone1" value="{$users.tile}" placeholder="紧急联系人手机号"/>
                                {/if}
                            </li>
                            <li class="toauth"><span style="margin-right:  1rem;">身份证号:</span>
                                {if !empty($users.identity) && ($users.step == 4)}<span>{$users.identity}</span>{else /}
                                <input type="text" id="identity" value="{$users.identity}" {if condition="$users.identity neq ''"}readonly="readonly" {/if} placeholder="身份证号"/>
                                {/if}
                            </li>
                            <!--<li class="toauth"><span style="margin-right:  1rem;">服务区域:</span>-->
                                <!--<input  type="text" id="area" value="" placeholder="服务区域"/>-->
                                <!--<input type="hidden" id="area_id"  placeholder="服务区域"/>-->
                            <!--</li>-->
                            {php}
                            $img_s = explode(',',$users['img']);
                            $img_s1 = isset($img_s[0])&& !empty($img_s[0])?$img_s[0]:'';
                            $img_s2 = isset($img_s[1])&& !empty($img_s[1])?$img_s[1]:'';
                            $img_s3 = isset($img_s[2] )&& !empty($img_s[2])?$img_s[2]:'';
                            {/php}
                            <li class="toauth f_input" style="width: 100%;line-height: 10rem;height:10rem;">
                                <span>身份证正面:</span>
                                <span class="uploadImg" style="width: 65%;height: 9rem;">
                                        <!--<input type="file" class="file" id="file_3" onchange="upimg(3)" style="height: 9rem;width: 16rem;" size="1" >-->
                                        <a  {if $img_s1 =="" ||  $users.step == 4}  href="javascript:upimg(3);" {else /}  href="javascript:;"{/if} style="width: 100%;height: 9rem;">
                                            <img {if condition='$img_s1 eq "" '}src="/static/wap/20181201173806.png "{else /} src = '{$img_s1}' {/if} id="img_3" style="width: 100%;height:  8.459rem;border: 1px solid #f2f2f2;" />
                                        </a>
                                    </span>
                            </li>
                            <li class="toauth f_input" style="width: 100%;line-height: 10rem;height:10rem;">
                                <span>身份证反面:</span>
                                <span class="uploadImg" style="width:  65%;height: 9rem;">
                                    <!--<input type="file" class="file" id="file_4" style="height: 9rem;width: 16rem;" onchange="upimg(4)" size="1" >-->
                                    <a  {if $img_s2 =="" ||  $users.step == 4} href="javascript:upimg(4);" {else /}  href="javascript:;"{/if} style="width: 100%;height: 9rem;">
                                        <img {if condition='$img_s2 eq "" '}src="/static/wap/20181201173806.png "{else /} src = '{$img_s2}' {/if} id="img_4" style="width: 100%;height:  8.459rem;border: 1px solid #f2f2f2;" />
                                    </a>
                                </span>
                            </li>
                            <li class="toauth f_input" style="width: 100%;line-height: 10rem;height:10rem;">
                                <span>手持身份证:</span>
                                <span class="uploadImg" style="width:  65%;height: 9rem;">
                                    <!--<input type="file" class="file" id="file_6" style="height: 9rem;width: 16rem;" onchange="upimg(6)" size="1" >-->
                                    <a {if $img_s3 =="" ||  $users.step == 4} href="javascript:upimg(6);" {else /}  href="javascript:;"{/if} style="width: 100%;height: 9rem;">
                                        <img {if condition='$img_s3 eq "" '}src="/static/wap/20181201173806.png "{else /} src = '{$img_s3}' {/if} id="img_6" style="width: 100%;height:  8.459rem;border: 1px solid #f2f2f2;" />
                                    </a>
                                </span>
                            </li>
                            <li class="toauth f_input" style="width: 100%;line-height: 10rem;height:10rem;margin-left: 1rem;">
                                <span>营业执照:</span>
                                <span class="uploadImg" style="width:  65%;height: 9rem;">
                                    <!--<input type="file" class="file" id="file_5" style="height: 9rem;width: 16rem;" onchange="upimg(5)" size="1" >-->
                                    <a  {if $users.imgs =="" ||  $users.step == 4}  href="javascript:upimg(5);" {else /}  href="javascript:;"{/if}   style="width: 100%;height: 9rem;">
                                        <img {if condition='empty($users.imgs) neq "" '}src="/static/wap/20181201173806.png "{else /} src = '{$users.imgs}' {/if} id="img_5" style="width: 100%;height:  8.459rem;border: 1px solid #f2f2f2;" />
                                    </a>
                                </span>
                            </li>
                            <li class="toauth ">
                                <span>保证金:</span>
                                <span class=" mui-radio mui-left" style="margin-left: -10px;">
                                    <label>{$config.b_bail}元</label>
                                    <input name="radio1" checked onclick="test(this)" value="4" type="radio">
                                </span>
                            </li>
                            <li class="toauth" style="padding: 10px;text-align: left;border-bottom:none;height: -webkit-fit-content;">

                                <label style=" display: block; height: 1.5rem;line-height: 1.5rem;color: #000;font-size: 14px;">保证金说明：</label>
                                <span style="line-height: 1rem;width: 97%;border: 1px solid #f2f2f2;padding: 1rem;">  {$config.remark}</span>

                            </li>

                            <li class="toauth" style="padding: 10px;text-align: center;    border-bottom:none">
                                <input style="width: 280px;height: 3rem; background: #01cebf;font-size: 1.4rem;" type="submit" id="bank_btn" value="提交" placeholder=""/>
                            </li>

                        </ul>

                    </section>
                </main>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
            </div>
        </div>
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>
<!--身份证-->
<input type="hidden" name="imgs_3"  {if condition='$img_s1 eq "" '}value=" "{else /} value = '{$img_s1}' {/if} >
<input type="hidden" name="imgs_4" {if condition='$img_s2 eq "" '}value=" "{else /} value = '{$img_s2}' {/if} >
<input type="hidden" name="imgs_6" {if condition='$img_s3 eq "" '}value=" "{else /} value = '{$img_s3}' {/if} >

<input type="hidden" name="imgs_5" {if condition='empty($users.imgs) eq "" '}value=" "{else /} value = '{$users.imgs}' {/if} >
{include file="public/footer"}
</body>
<script>
    function upimg(i) {
        var reads= new FileReader();
        f=document.getElementById('file_'+i).files[0];
        reads.readAsDataURL(f);
        reads.onload=function (e) {


            $.ajax({
                type:"post",
                url:'{:url("uplaodimg")}',
                dataType:"json",
                data:{file:this.result},
                success: function(data){
                    if(data.code == 1){
                        layer.msg(data.msg, {icon: 6, time: 1000},function(){

                            $('#img_'+i).attr('src',data.data.src);
                            $('input[name="imgs_'+i+'"]').val(data.data.src);
                        });
                    }else{
                        layer.msg(data.msg, {icon: 5, time: 2000});
                    }
                }
            });
        };
    }

    $('#area').bind("click",function () {
        var data =[];
        $.get('{:url("getarea")}',function (res) {
            data =  res.data;
            var picker = new mui.PopPicker({   //这里注意大小写PopPicker
                layer: 3,  //表示三列，即三级菜单或者联动
                buttons:['取消', '确定']     //显示按钮
            });
            console.log(data);
            picker.setData(data);
            //这里代表被选中的元素
            picker.show(function (selectItems) {
                $("#area").val(selectItems[0].text+'-'+selectItems[1].text+'-'+selectItems[2].text);
                $("#area_id").val(selectItems[0].value+','+selectItems[1].value+','+selectItems[2].value);
            })
        });
    });

    $("#bank_btn").click(function(){
        var realname = $("#realname").val();
        var phone = $("#phone").val();
        var identity = $("#identity").val();
        var img1 = $('input[name="imgs_3"]').val()+','+$('input[name="imgs_4"]').val()+','+$('input[name="imgs_4"]').val();
        var img2 = $('input[name="imgs_5"]').val();
//        var area_id = $("#area_id").val();
        var phone1 = $("#phone1").val();
        var type = $("input[name='radio1']:checked").val();
        if(realname.length < 1){
            layer.msg('请填写姓名', {icon: 5, time: 2000});
            return;
        }


        if (phone == ''){
            layer.msg('请填写手机号', {icon: 5, time: 2000});
            return;
        }
        if (phone1 == ''){
            layer.msg('请填写紧急联系人手机号', {icon: 5, time: 2000});
            return;
        }
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
        if (!myreg.test(phone)){
            layer.msg('请填写正确手机号', {icon: 5, time: 2000});
            return;
        }
        if (!myreg.test(phone1)){
            layer.msg('请填写正确紧急联系人手机号', {icon: 5, time: 2000});
            return;
        }
        if (phone == phone1){
            layer.msg('紧急联系人手机号不能相同', {icon: 5, time: 2000});
            return;
        }

        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if(reg.test(identity) === false){
            layer.msg('请填写正确的身份证号', {icon: 5, time: 2000});
            return;
        }

        if($('input[name="imgs_3"]').val().length < 1 || $('input[name="imgs_4"]').val() < 1){
            layer.msg('请上传身份证', {icon: 5, time: 2000});
            return;
        }

        $.ajax({
            type:"post",
            url:'{:url("fuwushang")}',
            dataType:"json",
            data:{realname:realname,phone:phone,phone1:phone1,identity:identity,img1:img1,img2:img2,type:type},
            success: function(data){
                if(data.code == 1){
                    layer.msg(data.msg, {icon: 6, time: 1000},function(){
                        window.location.href = "/index/account/todopay?money="+data.data.money;
                    });
                }else{
                    layer.msg(data.msg, {icon: 5, time: 2000});
                }
            }
        });
    });
</script>
</html>